<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
    <link href="assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/libs/css/style.css">
    <link rel="stylesheet" href="assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
    <link rel="stylesheet" href="assets/vendor/charts/chartist-bundle/chartist.css">
    <link rel="stylesheet" href="assets/vendor/charts/morris-bundle/morris.css">
    <link rel="stylesheet" href="assets/vendor/fonts/material-design-iconic-font/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="assets/vendor/charts/c3charts/c3.css">
    <link rel="stylesheet" href="assets/vendor/fonts/flag-icon-css/flag-icon.min.css">
    <title>Encrypt With SM2</title>
</head>

<body class=" bg-dark">
    <!-- ============================================================== -->
    <div class="dashboard-main-wrapper ">
        <!-- wrapper  -->
        <!-- ============================================================== -->
        <div class="influence-finder">
            <div class="container-fluid dashboard-content " id="content_end">
                <div class="row">
                    <!-- ============================================================== -->
                    <!-- search bar  -->
                    <!-- ============================================================== -->
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card">
                            <div class="card-body">
                                <input class="form-control form-control-lg" type="search"
                                    placeholder="Message To Be Encrypted" aria-label="Search" id="input">
                                <button class="btn btn-primary search-btn" type="submit" id="render">Encrypt</button>
                            </div>
                        </div>
                    </div>
                    <!-- ============================================================== -->
                    <!-- end search bar  -->
                </div>
                <div class="text-center invisible collapse" id="progress">
                    <p class="dashboard-spinner spinner-danger spinner-md"></p>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- Optional JavaScript -->
    <!-- jquery 3.3.1 -->
    <script src="assets/vendor/jquery/jquery-3.3.1.min.js"></script>
    <!-- bootstap bundle js -->
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
    <!-- slimscroll js -->
    <script src="assets/vendor/slimscroll/jquery.slimscroll.js"></script>
    <!-- main js -->
    <script src="assets/libs/js/main-js.js"></script>
    <!-- chart chartist js -->
    <script src="assets/vendor/charts/chartist-bundle/chartist.min.js"></script>
    <!-- sparkline js -->
    <script src="assets/vendor/charts/sparkline/jquery.sparkline.js"></script>
    <!-- morris js -->
    <script src="assets/vendor/charts/morris-bundle/raphael.min.js"></script>
    <script src="assets/vendor/charts/morris-bundle/morris.js"></script>
    <!-- chart c3 js -->
    <script src="assets/vendor/charts/c3charts/c3.min.js"></script>
    <script src="assets/vendor/charts/c3charts/d3-5.4.0.min.js"></script>
    <script src="assets/vendor/charts/c3charts/C3chartjs.js"></script>
    <script src="assets/libs/js/dashboard-ecommerce.js"></script>
</body>


<script id="tpl" type="text/template">
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="card">
                <div class="card-header">
                    Encrypted Message
                </div>
                <div class="card-body">
                    <p class="card-text"><%:=part0.encryp_msg%></p>
                </div>
                <div class="card-footer d-flex text-muted">
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
                        Message Length:<%:=part0.msg_len%>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
                        Encrypted Message Length:<%:=part0.encryp_msg_len%>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
                        Encrypted R and S Length:<%:=part0.encryp_mes_len_rs%>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
            <div class="card">
                <h4 class="card-header">Enc-sig and Ver-dec</h4>
                <div class="card-body">
                    <table class="table">
                        <!-- <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">First</th>
                                <th scope="col">Last</th>
                                <th scope="col">Handle</th>
                            </tr>
                        </thead> -->
                        <tbody>
                            <tr class="table-primary">
                                <th scope="row">Time</th>
                                <td><%:=part1.times%></td>
                            </tr>
                            <tr class="table-info">
                                <th scope="row">Duration</th>
                                <td><%:=part1.dur%></td>
                            </tr>
                            <tr class="table-success">
                                <th scope="row">Bytes</th>
                                <td><%:=part1.total_bytes%></td>
                            </tr>
                            <tr class="table-secondary">
                                <th scope="row">Time-per-ms</th>
                                <td><%:=(part1.process_time).toFixed(4)%></td>
                            </tr>
                            <tr class="table-warning">
                                <th scope="row">Bytes-per-s</th>
                                <td><%:=(part1.per_process_time).toFixed(4)%></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
            <div class="card">
                <h4 class="card-header">Enc-sig</h4>
                <div class="card-body">
                    <table class="table">
                        <!-- <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">First</th>
                                <th scope="col">Last</th>
                                <th scope="col">Handle</th>
                            </tr>
                        </thead> -->
                        <tbody>
                            <tr class="table-primary">
                                <th scope="row">Time</th>
                                <td><%:=part2.times%></td>
                            </tr>
                            <tr class="table-info">
                                <th scope="row">Duraiton</th>
                                <td><%:=part2.dur%></td>
                            </tr>
                            <tr class="table-success">
                                <th scope="row">Bytes</th>
                                <td><%:=part2.total_bytes%></td>
                            </tr>
                            <tr class="table-secondary">
                                <th scope="row">Time-per-ms</th>
                                <td><%:=(part2.process_time).toFixed(4)%></td>
                            </tr>
                            <tr class="table-warning">
                                <th scope="row">Bytes-per-s</th>
                                <td><%:=(part2.per_process_time).toFixed(4)%></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
            <div class="card">
                <h4 class="card-header">Ver-dic</h4>
                <div class="card-body">
                    <table class="table">
                        <!-- <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">First</th>
                                <th scope="col">Last</th>
                                <th scope="col">Handle</th>
                            </tr>
                        </thead> -->
                        <tbody>
                            <tr class="table-primary">
                                <th scope="row">Time</th>
                                <td><%:=part3.times%></td>
                            </tr>
                            <tr class="table-info">
                                <th scope="row">Duration</th>
                                <td><%:=part3.dur%></td>
                            </tr>
                            <tr class="table-success">
                                <th scope="row">Bytes</th>
                                <td><%:=part3.total_bytes%></td>
                            </tr>
                            <tr class="table-secondary">
                                <th scope="row">Time-per-ms</th>
                                <td><%:=(part3.process_time).toFixed(4)%></td>
                            </tr>
                            <tr class="table-warning">
                                <th scope="row">Bytes-per-s</th>
                                <td><%:=(part3.per_process_time).toFixed(4)%></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="tpl2" type="text/template">
    <div class="row">
        <span class="dashboard-spinner spinner-primary spinner-xxl"></span>
    </div>
</script>
<script type="text/javascript">

    document.getElementById("render").onclick = function render() {
        //添加进度条。因为渲染程序会卡住会阻止界面动画。最好的办法是变成异步请求，显示进度条。
        document.getElementById("progress").setAttribute("class", "text-center show collapse");

        // 异步执行获取数据，因为js引擎会优先处理js事件，然后对页面进行渲染，如果使用获取数据堵塞js进程，页面不会立即渲染。
        setTimeout(() => {
            //获取nodejs辅助函数库
            const sm2 = require('./build/Release/sm2');
            const template = require('template_js');

            //对message信息进行过滤
            var message = document.getElementById("input").value;
            if(message.length<=0 || message.length>255){
                alert("length of message 0~255");
                document.getElementById("progress").setAttribute("class", "text-center invisible collapse");
                return ;
            }

            //获取数据并渲染数据
            var test = sm2.test(message);
            var tpl = document.getElementById('tpl').innerHTML;
            var html = template(tpl, test);

            //创建新的div并添加到最后边
            var div = document.createElement("div");
            div.innerHTML = html;
            document.getElementById("content_end").appendChild(div);
            //删除进度条
            document.getElementById("progress").setAttribute("class", "text-center invisible collapse");
        },100)


    }
</script>

</html>